{extend name="base_mobile" /}
{block name="body"}
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>数据分析</h1>
    <div id="hui-header-menu" onclick="hui.showSlideMenu();"></div>
</header>
<div class="hui-wrap">
    <div class="hui-list">
        <form action="{:url('user/analysis/index')}" class="layui-form" method="get">
            <div class="hui-form-items">
                <input type="date" name="dateframe" class="hui-button hui-button-large hui-date-picker" placeholder="{$dateframe}" style="margin-top:20px;" />
            </div>
            <div class="hui-form-items">
                <div class="hui-form-select" style="width:100%; height:50px; line-height:50px; text-align:center; float:left;">
                    <select name="type">
                        <option value="">统计类型</option>
                        <option value="1">新增客户</option>
                        <option value="2">新增回访（跟踪）</option>
                        <option value="3">新增提醒</option>
                        <option value="4">新增交易</option>
                    </select>
                </div>
            </div>
            <button class="hui-button hui-button-large hui-primary ajax-search"><i class="fa fa-search"></i> 查看数据</button>
        </form>
    </div>
    
    <div class="hui-list">
        <div id="container" style="height: 400px;"></div>
    </div>
    
    
</div>
<br><br><br>
{/block}
{block name="js"}
<script src="/static/js/echarts.common.min.js"></script>  
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '{$dateframe} - {$name}',
            left: 'center'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            name: '日期',
            splitLine: {show: true},
            data: [
            <?php foreach ($array as $r) {?>
                '{$r}',
            <?php }?>]
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [{
            name: '数量',
            data: [<?php foreach ($value as $r) {?>
                    {$r},
                    <?php }?>],
            type: 'line',
            label:{
                normal:{
                    show:true,
                    position:'top',
                    textStyle: {
                        color: '#333',
                        fontSize: 18
                    }
                }
            }
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<script type="text/javascript">
/* 修正 datepicker 样式 */
hui.datePicker();
</script>
{/block}